<div class="sim-header padding-lr-header">
    <nav>
        <div class="nav-wrapper">
            <a href="javascript:void(0)" data-activates="mobile-demo" class="button-collapse sim-header-link"><i class="fa fa-bars"></i></a>
            <ul class="left ">
                <li class="text-med-gray"><a class="waves-effect waves-dark dark-link ev-header-overflow dashboard-evailai-logo" ui-sref="home"> <span class="hide-on-small-only"><img src="dist/images/evalai-logo.png"></span></a></li>
                <li class="text-med-gray"><a class="waves-effect waves-dark dark-link main-header-link" ui-sref="web.challenge-main">All Challenges</a></li>
                <li class="text-med-gray"><a class="waves-effect waves-dark dark-link main-header-link" href="https://evalai.readthedocs.io/en/latest/" target="_blank">Documentation</a></li>
            </ul>
            <ul ng-if="isAuth" class="right">
                <li class="text-med-gray"><a class="waves-effect waves-dark dark-link ev-header-overflow" ui-sref="web.profile"> <span class="hide-on-small-only"><span class="text-light-black">Hi</span> {{web.name}} </span></a></li>
                <li>
                    <div class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-14" ng-click="logout()">Logout</div>
                </li>
            </ul>
            <ul ng-if="!isAuth" class="right">
                <li class="text-med-gray"><a class="waves-effect waves-dark dark-link ev-header-overflow" ui-sref="auth.signup"> <span class="hide-on-small-only"> Sign Up </span></a></li>
                <li>
                    <a class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-14" ui-sref="auth.login">Log In</a>
                </li>
            </ul>
            <ul class="side-nav" id="mobile-demo">
                <li>
                    <div class="userView">
                        <div class="background">
                            <a class="white-text name">EvalAI</a>
                        </div>
                    </div>
                </li>
                <li><a class="waves-effect waves-dark" ui-sref="home" ui-sref-active="active"><i class="fa fa-home"></i>Home</a></li>
                <li ng-if="!isAuth"><a class="waves-effect waves-dark main-header-link" ui-sref="web.challenge-main"><i class="fa fa-fire"></i>All Challenges</a></li>
                <li ng-hide="isAuth"><a class="waves-effect waves-dark sim-header-link" ui-sref="auth.signup" ui-sref-active="active"><i class="fa fa-sign-out"></i>Sign Up</a></li>
                <li ng-hide="isAuth"><a class="waves-effect waves-dark sim-header-link" ui-sref="auth.login" ui-sref-active="active"><i class="fa fa-sign-in"></i>Log In</a></li>
                <!-- show after authenticate user -->
                <li ng-show="isAuth"><a class="waves-effect waves-dark sim-header-link" ui-sref="web.dashboard" ui-sref-active="active"><i class="fa fa-thumb-tack"></i>Dashboard</a></li>
                <li ng-show="isAuth"><a class="waves-effect waves-dark sim-header-link" ui-sref="web.challenge-main" ui-sref-active="active"><i class="fa fa-fire"></i>All Challenges</a></li>
                <li ng-show="isAuth"><a class="waves-effect waves-dark sim-header-link" ui-sref="web.teams" ui-sref-active="active"><i class="fa fa-users"></i>Participant Teams</a></li>
                <li ng-show="isAuth"><a class="waves-effect waves-dark sim-header-link" ui-sref="web.challenge-host-teams" ui-sref-active="active"><i class="fa fa-paper-plane"></i>Create Challenge</a></li>
                <li ng-show="isAuth"><a class="waves-effect waves-dark sim-header-link" ui-sref="web.profile" ui-sref-active="active"><i class="fa fa-user"></i>Hi {{web.name}}!</a></li>
            </ul>
        </div>
    </nav>
</div>
